<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>角色列表</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/layuiadmin/style/admin.css" media="all">
</head>
<body>

<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">角色列表</div>
                <div class="layui-card-body">
                    <table class="layui-hide" id="test-table-reload" lay-filter="test-table-reload"></table>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/html" id="resource-toolbar">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add"><i class="layui-icon">&#xe654;</i>添加</button>
    </div>
</script>

<script type="text/html" id="test-table-operate-barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script src="/layuiadmin/layui/layui.js"></script>
<script>
    layui.config({
        base: '/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'table'], function () {
        const table = layui.table;

        //方法级渲染
        const tableFunction = function () {
            table.render({
                elem: '#test-table-reload'
                , url: '/sys-role/list'
                , method: 'post'
                , contentType: 'application/json'
                , toolbar: '#resource-toolbar'
                , cols: [
                    [
                        // {checkbox: true, fixed: true}
                        {field: 'authority', title: '名称'}
                        , {field: 'name', title: '描述'}
                        , {field: 'createTime', title: '创建时间'}
                        ,{align:'center', fixed: 'right', toolbar: '#test-table-operate-barDemo'}
                    ]
                ]
                , page: true
                // ,height: 315
                , response: {
                    statusCode: 200 //重新规定成功的状态码为 200，table 组件默认为 0
                }
                , parseData: function (res) { //res 即为原始返回的数据
                    return {
                        "code": 200, //解析接口状态
                        "msg": "", //解析提示文本
                        "count": res.data.total, //解析数据长度
                        "data": res.data.records //解析数据列表
                    };
                }
            });
        };

    tableFunction();

    var $ = layui.$, active = {
        reload: function () {
            var demoReload = $('#test-table-demoReload');

            //执行重载
            table.reload('test-table-reload', {
                page: {
                    curr: 1 //重新从第 1 页开始
                }
                , where: {
                    key: {
                        id: demoReload.val()
                    }
                }
            });
        }
    };


    // 表格顶部操作列
    table.on('toolbar(test-table-reload)', function (obj) {
        if (obj.event === 'add') {
            layer.open({
                type: 2,
                title: '角色添加',
                shadeClose: true,
                shade: false,
                area: ['100%', '100%'],
                content: '/sys-role/addPage',
                end: function () {
                    tableFunction();
                }
            });
        }
    });

    //监听工具条
    table.on('tool(test-table-reload)', function(obj){
        const data = obj.data;
        if(obj.event === 'del'){
            layer.confirm('真的删除行么', function(index){
                obj.del();
                layer.close(index);
            });
        } else if(obj.event === 'edit'){
            layer.open({
                type: 2,
                title: '角色更新',
                shadeClose: true,
                shade: false,
                area: ['100%', '100%'],
                content: '/sys-role/updatePage?id=' + data.id,
                end: function () {
                    tableFunction();
                }
            });
        }
    });


    $('.test-table-reload-btn .layui-btn').on('click', function () {
        var type = $(this).data('type');
        active[type] ? active[type].call(this) : '';
    });

    })
    ;
</script>
</body>
</html>
